<template>
	<view>
		<view class="nav">
			<!-- 左侧 -->
			<view class="nav-left">
				<scroll-view scroll-x scroll-y scroll-with-animation :style="[{'height': containerHeight + 'px'}]">
					<left-tree :data="equipment.tree" @clickTreeNode="clickTreeNode"></left-tree>
				</scroll-view>
			</view>

			<!-- 右侧 -->
			<view class="nav-right">
				<mescroll-body bottom="60px" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="uni-list">
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="item in list" :key="item.locaId">
								<view>
									<radio :value="item.locaId" :checked="item.locaId === checkedItem.id" />
								</view>
								<view>
									<view class="item-content">
										<!-- <view class="item-detail">资产编码：{{ item.assetNo }}</view>
										<view class="item-detail">资产名称：{{ item.assetName }}</view> -->
										<view class="item-detail">{{$t('equipment.common.locaNo')}}：{{ item.locaNo }}</view>
										<view class="item-detail">{{$t('equipment.common.locaName')}}：{{ item.locaName }}</view>
									</view>
								</view>
							</label>
						</radio-group>
					</view>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import LeftTree from './left-tree.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { getEqLocationList } from '@/api/base/equipment.js'

	export default {
		mixins: [MescrollMixin],
		components: {
			LeftTree
		},
		props: {
			equipment: {
				type: Object
			}
		},
		data() {
			return {
				containerHeight: 0,
				type: "",
				list: [],
				checkedItem: {},
				locaNo: "",
				locaName: ""
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					const windowHeight = res.windowHeight // 可使用窗口高度
					this.containerHeight = windowHeight
				}
			})
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let requestPage = {
					pageNo: page.num,
					limit: page.size
				}
				
				let params = {
					requestPage: requestPage,
					isOn: "Y"
				}
				
				if (this.type == "fliter") {
					params.locaNo = this.locaNo
					params.locaName = this.locaName
				} else {
					if (this.type == "link") {
						params.path = this.equipment.path
						params.pathLocaId = this.equipment.locaId
					}
				}
				
				if (this.equipment.initParams.maintainDeptNo) {
					params.maintainDeptNo = this.equipment.initParams.maintainDeptNo
				}
				if (this.equipment.initParams.assetIsNull) {
					params.assetIsNull = this.equipment.initParams.assetIsNull
				}
				

				getEqLocationList(params).then(res => {
					let curPageData = res.data.records
					let curPageLen = curPageData.length
					let totalSize = res.data.total
					//设置列表数据
					if (page.num == 1) this.list = [] //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData) //追加新数据

					this.mescroll.endBySize(curPageLen, totalSize)
				})
			},
			clickTreeNode(node) {
				this.list = []
				this.equipment.locaId = node.key
				this.equipment.path = node.data.pathData.path
				this.type = "link"
				this.mescroll.resetUpScroll()
			},
			radioChange(e) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].locaId === e.target.value) {
						this.checkedItem = this.list[i];
						break;
					}
				}
				this.$emit("getAsset", this.checkedItem)
			},
			listFilter(data) {
				this.type = "fliter"
				this.locaNo = data.fliterLocaNo
				this.locaName = data.fliterLocaName
				this.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		display: flex;
		width: 100%;
		background-color: #fff;
	}

	.nav-left {
		position: fixed;
		width: 45%;
		border-right: 1px solid #F1F1F1;
	}

	.nav-right {
		width: 55%;
		margin-left: 45%;
	}

	/deep/ uni-radio .uni-radio-input {
		width: 14px;
		height: 14px;
	}

	.uni-list-cell {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ebedf0;
		padding: 5px 0;
		padding-left: 2px;
	}

	.item-content {
		width: 100%;
	}

	.item-detail {
		line-height: 24px;
		font-size: 12px;
	}
</style>
